<style>
    .slider-wrapper {
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 50px auto;
        position: relative;
        border: 1px solid #ccc;
    }
    
    .slider-content {
        width: 2500px;
        height: 100%;
    }
    
    .slider-content>li {
        width: 500px;
        height: 300px;
        float: left;
        font-size: 100px;
        line-height: 300px;
        text-align: center;
        font-weight: bold;
    }
    
    .slider-content>li.one {
        background-color: red;
    }
    
    .slider-content>li.two {
        background-color: blue;
    }
    
    .slider-content>li.three {
        background-color: yellow;
    }
    
    .slider-content>li.four {
        background-color: green;
    }
    
    .slider-content>li.five {
        background-color: pink;
    }
    
    .nav {
        width: 50px;
        height: 50px;
        background-color: gray;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -25px;
        cursor: pointer;
    }
    
    .nav-right {
        left: auto;
        right: 0;
    }
</style>

<div class="slider-wrapper">
    <ul class="slider-content">
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li class="four">4</li>
        <li class="five">5</li>
    </ul>
    <div class="">
        <div class="nav nav-left"></div>
        <div class="nav nav-right"></div>
    </div>

    <script>
        let width = $('.slider-content > li').width()

        function init() {
            initEvent()
        }

        function initEvent() {
            $('.nav').on('click', onNavClick)
        }

        function onNavClick() {
            let $this = $(this)
            if ($(':animated').length > 0) {
                return
            }
            if ($this.hasClass('nav-right')) {
                $('.slider-content').animate({
                    'margin-left': -width
                }, 500, function() {
                    $(this)
                        .css('marginLeft', 0)
                        .append($(this).find('li:first'))
                })
            } else {
                $('.slider-wrapper ul')
                    .prepend($('.slider-wrapper ul>li:last'))
                    .css({
                        'marginLeft': -width
                    })
                    .animate({
                        'marginLeft': 0
                    }, 500, function() {
                        console.log('动画完成');
                    })
            }
        }

        init()
    </script>
</div>